export const metadata = {
  title: 'Horizontal Bars',
  description:
    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
};

<ComponentCodePreview name='horizontal-bars' type="separate" />


## Props

| Prop             | Type       | Default      | Description                                                                 |
| ---------------- | ---------- | ------------ | --------------------------------------------------------------------------- |
| `backgroundColor`| `string`   | `'#F0EEE6'`  | Background color of the canvas.                                             |
| `lineColor`      | `string`   | `'#444'`     | Color of the vertical lines.                                                |
| `barColor`       | `string`   | `'#000000'`  | Color of the animated bars.                                                 |
| `lineWidth`      | `number`   | `1`          | Width of the vertical lines.                                                |
| `animationSpeed` | `number`   | `0.0005`     | Speed of the bar animation.                                                 |
| `removeWaveLine` | `boolean`  | `true`       | Whether to remove the animated wave line (if true, the wave is not shown). |
